<template>
   <div class="breadcrumb-style">
       <el-breadcrumb separator="/">
       <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
       <el-breadcrumb-item :to="{ path: '/ums/admin' }">权限</el-breadcrumb-item>
       <el-breadcrumb-item>菜单列表</el-breadcrumb-item>
       </el-breadcrumb>
    </div>
    <div>
        <div class="adddata">
    <div class="title">
      <el-icon><Tickets /></el-icon>
      <h3>数据列表</h3>
    </div>
    <div>
      <el-button type="primary" @click="AddUser">添加</el-button>
    </div>
  </div>
  <div class="tables">
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="id" label="编号" width="100" />
      <el-table-column prop="title" label="菜单名称" width="170" />
      <el-table-column label="菜单级数" width="170" >
        <template #default="scope">
          <div>
            {{ scope.row.parentId==0? '一级': '二级' }}
          </div>
        </template>
      </el-table-column>

      <el-table-column prop="name" label="前端名称" width="170" />
      <el-table-column label="前端图标" width="100"/>
      <el-table-column label="是否显示" width="100" align="center">
        <template #default="scope">
          <div>
            <el-switch :value="scope.row.hidden === 0 ? true : false"  @click="onSwitch(scope.row.id,scope.row.hidden)"/>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="sort" align="center" label="排序" width="100"/>
      <el-table-column align="center" label="设置" width="100"/>
      <el-table-column align="center" label="操作" width="170">
        <template #default="scope">
          <div>
            <span class="users" @click="onAddUser(scope.row.id)">编辑</span>
          </div>
        </template>
        
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 30, 40]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        
      />
    </div>
  </div>
    </div>
</template>

<script setup lang='ts'>
import { ref } from "vue";
import * as api from "@/request/api";
import menuTables from "@/hooks/menuTables";
import  {useRouter} from "vue-router"
// import {MenuKaiGuan} from '../../request/_gq_Resource/index'
import { ElMessage } from 'element-plus'
import {resource} from '../../request/api'
// import {resource} from '../../request/api'
const currentPage = ref(1);
const pageSize = ref(10);
const small = ref(false);
const background = ref(true);
const disabled = ref(false);
const router = useRouter()
// 编辑弹窗
let visiable = ref(false);
const visiableFn = (e: boolean) => {
  // console.log("e", e);
  visiable.value = e;
};
//获取用户列表数据
let name = ref("");



let { getTableData, tableData, total } = menuTables(api.admin.OnMenu, {
  keyword: name.value , // 可以删掉 name.value 不是一个响应式数据
  pageSize: pageSize,
  pageNum: currentPage,
});

getTableData();
// 点击开关按钮,修改状态
let onSwitch= (val:any,val2:any) =>{
  // console.log(val,val2,11212);
  resource.MenuKaiGuan({
    id:val,
    hidden:(val2-1)*-1
  }).then((res) =>{
    if(res){
      getTableData();
      ElMessage({
      message: '状态修改成功',
      type: 'success',
  })
    }
    // console.log(res);
    
  })

}
// 进入页面获取数据
getTableData();
//页数改变
const handleSizeChange = (val: number) => {
  getTableData();
  // console.log(`${val} items per page`);
};
//数据条数改变
const handleCurrentChange = (val: number) => {
  getTableData();
  // console.log(`current page: ${val}`);
};
    //编辑
let onAddUser = (val: any) => {
    router.push({
    path:'/ums/addMenu',
    query:{id:val}
  })
};

// 添加
let AddUser = () => {
    router.push({
    path:'/ums/addMenu'
  })
};
</script>
 
<style lang = "scss" scoped>
.breadcrumb-style{
    width: 100%;
    height: 30px;
    background-color: #fff;
    border-bottom: 1px solid #eee
}
    .adddata {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  margin-bottom: 20px;
  border: 1px solid #ebeef5;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
}
.title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .ei {
    display: flex;
    align-items: center;
    h3 {
      color: #303133;
      font-size: 14px;
      margin-left: 10px;
    }
  }
}
.tables {
  .pagination {
    margin: 20px 0;
    padding-right: 20px;
    float: right;
  }
  .users {
    text-align: center;
    color: #409eff;
    display: inline-block;
    width: 60px;
    font-size: 12px;
    &:hover {
      color: rgba(64, 158, 255, 0.7);
      cursor: pointer;
    }
  }
}
</style>